<template>
  <Panel title="能耗" width="380px">
    <div class="chart-container">
      <div style="height: 100%; width: 100%" ref="chartRef"></div>
    </div>
  </Panel>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";

const chartRef = ref();
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    grid:{
      left:30,
      right:10,
      top:20,
      bottom:20,
    },
    legend: {
      icon:"roundRect",
      data: ["电", "水"],
      textStyle:{
        color:"#FFFFFF",
      }
    },
    tooltip: {
      trigger: "axis",
    },
    color: [
      {
        type: "linear",
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#2560FF",
          },
          {
            offset: 1,
            color: "#5DFFFF",
          },
        ],
        global: false,
      },
      {
        type: "linear",
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#FF4C25",
          },
          {
            offset: 1,
            color: "#FFD25D",
          },
        ],
        global: false,
      },
    ],
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLine: {
        lineStyle: {
          color: "#FFFFFF80",
        },
      },
      axisTick: {
        show: true,
        length: 2,
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#FFFFFF80",
        },
      },
      axisTick: {
        show: true,
        length: 2,
      },
    },
    series: [
      {
        name: "水",
        symbol: "none",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
      {
        name: "电",
        symbol: "none",
        data: [150, 232, 201, 154, 190, 330, 410],
        type: "line",
        smooth: true,
      },
    ],
  });
});
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 260px;
  padding: 16px 0px;
}
</style>
